<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Focus Test Window</title>
    <style>
        body {
            padding: 20px;
            font-family: system-ui, -apple-system, sans-serif;
        }
        #focus-count {
            margin-top: 10px;
        }
    </style>
    <script>
        // Will be dynamically updated based on window number
        let windowNum = 1;
        let bgColor = 'hsl(0, 70%, 95%)';
    </script>
</head>
<body>
    <h2>Window <span id="window-num">1</span></h2>
    <p>Focus: <span id="focus-status">Unknown</span></p>
    <div id="focus-count">Focus events: 0</div>
    <button onclick="window.focus()" style="margin-top: 10px;">Focus This Window</button>
    
    <script>
        // This will be updated dynamically when the window is created
        const params = new URLSearchParams(window.location.search);
        const num = params.get('num');
        if (num) {
            document.getElementById('window-num').textContent = num;
            document.body.style.background = `hsl(${num * 60}, 70%, 95%)`;
        }
    </script>
</body>
</html>